<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
		<script src="jquery.js"></script>
		<script src="bootstrap/js/bootstrap.js"></script>
		<script src="layer/layer.js"></script>
		<script src="template-web.js"></script>
		
		<style>
			#stu-list{
				margin-top: 10px;
			}
			
			.edit-btn,
			.delete-btn,
			#left-btn,
			.page-btn,
			#right-btn{
				cursor: pointer;
			}
			
		</style>
		
		<title></title>
	</head>
	<body>
		<nav class="navbar navbar-inverse">
		  <div class="container">
		    <div class="navbar-header">
		      <a class="navbar-brand" href="#">学生管理系统</a>
		    </div>
		  </div>
		</nav>
		
		<main class="container">
			<div>
				<button class="btn btn-success" data-toggle="modal" data-target="#addModal">添加学生</button>
				<button class="btn btn-warning glyphicon glyphicon-search" data-toggle="modal" data-target="#searchModal">搜索</button>
			</div>
			
			<div id="stu-list">
				
			</div>
			
			<div id="pager">
				
			</div>
			
		</main>
		
		<!--添加学生模态框-->
		<div class="modal fade" id="addModal" tabindex="-1" role="dialog">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		    	
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">添加学生</h4>
		      </div>
		      
		      <div class="modal-body">
		        <form class="form-horizontal" id="add-form">
						  <div class="form-group">
						    <label for="name" class="col-sm-2 control-label">姓名</label>
						    <div class="col-sm-10">
						      <input name="name" id="name" class="form-control" placeholder="中文汉字">
						    </div>
						  </div>
						  
						  <div class="form-group">
						    <label for="age" class="col-sm-2 control-label">密码</label>
						    <div class="col-sm-3">
						      <select class="form-control" name="age" id="age">
						      	<option>18</option>
						      	<option>19</option>
						      	<option>20</option>
						      	<option>21</option>
						      	<option>22</option>
						      	<option>23</option>
						      	<option>24</option>
						      	<option>25</option>
						      	<option>26</option>
						      </select>
						    </div>
						  </div>
						  
						  <div class="form-group">
						    <label class="col-sm-2 control-label">性别</label>
						    <div class="col-sm-10">
						    	<div style="padding-top: 6px;">
						    		<input checked id="male" type="radio" name="gender" class="" value="0">
							      <label for="male">男</label>
							      <input id="female" type="radio" name="gender" class="" value="1">
							      <label for="male">女</label>
						    	</div>
						    </div>
						  </div>
						  
						  <div class="form-group">
						    <label for="tel" class="col-sm-2 control-label">手机号</label>
						    <div class="col-sm-10">
						      <input name="tel" id="tel" class="form-control">
						    </div>
						  </div>
						  
						  <div class="form-group">
						    <label for="email" class="col-sm-2 control-label">邮箱</label>
						    <div class="col-sm-10">
						      <input name="email" id="email" class="form-control">
						    </div>
						  </div>
						  
						  <div class="form-group">
						    <label for="detail" class="col-sm-2 control-label">备注</label>
						    <div class="col-sm-10">
						      <textarea class="form-control" name="detail" id="detail"></textarea>
						    </div>
						  </div>
						  
						</form>
		      </div>
		      
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button id="add-btn" type="button" class="btn btn-primary">提交</button>
		      </div>
		      
		    </div>
		  </div>
		</div>
		
		<!--搜索模态框-->
		<div class="modal fade" id="searchModal" tabindex="-1" role="dialog">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		    	
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
		        <h4 class="modal-title">搜索</h4>
		      </div>
		      
		      <div class="modal-body">
		        <form class="form-horizontal" id="search-form">
						  <div class="form-group">
						    <label for="name" class="col-sm-2 control-label">姓名</label>
						    <div class="col-sm-10">
						      <input name="name" id="name" class="form-control" placeholder="中文汉字">
						    </div>
						  </div>
						  
						  <div class="form-group">
						    <label for="age" class="col-sm-2 control-label">年龄</label>
						    <div class="col-sm-3">
						      <input name="age" id="age" class="form-control" />
						    </div>
						  </div>
						  
						  <div class="form-group">
						    <label class="col-sm-2 control-label">性别</label>
						    <div class="col-sm-10">
						    	<div style="padding-top: 6px;">
						    		<input id="unlimt" type="radio" name="gender" class="" value="-1">
							      <label for="unlimt">不限</label>
						    		<input id="male" type="radio" name="gender" class="" value="0">
							      <label for="male">男</label>
							      <input id="female" type="radio" name="gender" class="" value="1">
							      <label for="male">女</label>
						    	</div>
						    </div>
						  </div>
						  
						  <div class="form-group">
						    <label for="tel" class="col-sm-2 control-label">手机号</label>
						    <div class="col-sm-10">
						      <input name="tel" id="tel" class="form-control">
						    </div>
						  </div>
						  
						</form>
		      </div>
		      
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button id="search-btn" type="button" class="btn btn-primary">提交</button>
		      </div>
		      
		    </div>
		  </div>
		</div>
		
		
		<!--修改模态框-->
		<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		    	
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">修改信息</h4>
		      </div>
		      
		      <div class="modal-body">
		        <form class="form-horizontal" id="edit-form">
						  <div class="form-group">
						    <label for="edit-name" class="col-sm-2 control-label">姓名</label>
						    <div class="col-sm-10">
						      <input disabled name="name" id="edit-name" class="form-control" placeholder="中文汉字">
						    </div>
						  </div>
						  
						  <div class="form-group">
						    <label for="edit-age" class="col-sm-2 control-label">年龄</label>
						    <div class="col-sm-3">
						      <select class="form-control" name="age" id="edit-age">
						      	<option>18</option>
						      	<option>19</option>
						      	<option>20</option>
						      	<option>21</option>
						      	<option>22</option>
						      	<option>23</option>
						      	<option>24</option>
						      	<option>25</option>
						      	<option>26</option>
						      </select>
						    </div>
						  </div>
						  
						  <div class="form-group">
						    <label class="col-sm-2 control-label">性别</label>
						    <div class="col-sm-10">
						    	<div style="padding-top: 6px;">
						    		<input checked id="edit-male" type="radio" name="gender" class="" value="0">
							      <label for="edit-male">男</label>
							      <input id="edit-female" type="radio" name="gender" class="" value="1">
							      <label for="edit-female">女</label>
						    	</div>
						    </div>
						  </div>
						  
						  <div class="form-group">
						    <label for="edit-tel" class="col-sm-2 control-label">手机号</label>
						    <div class="col-sm-10">
						      <input name="tel" id="edit-tel" class="form-control">
						    </div>
						  </div>
						  
						  <div class="form-group">
						    <label for="edit-email" class="col-sm-2 control-label">邮箱</label>
						    <div class="col-sm-10">
						      <input name="email" id="edit-email" class="form-control">
						    </div>
						  </div>
						  
						  <div class="form-group">
						    <label for="edit-detail" class="col-sm-2 control-label">备注</label>
						    <div class="col-sm-10">
						      <textarea class="form-control" name="detail" id="edit-detail"></textarea>
						    </div>
						  </div>
						  
						</form>
		      </div>
		      
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button id="edit-commit" type="button" class="btn btn-primary">提交</button>
		      </div>
		      
		    </div>
		  </div>
		</div>
		
	</body>
	
	<!--学生列表模板-->
	<script type="text/html" id="t1">
		<table class="table table-striped table-hover">
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>手机号</th>
				<th>邮箱</th>
				<th>修改</th>
				<th>删除</th>
			</tr>
			{{each stuData s index}}
			<tr>
				<td>{{s.name}}</td>
				<td>{{s.age}}</td>
				<td>{{s.gender==1?"女":"男"}}</td>
				<td>{{s.tel}}</td>
				<td>{{s.email}}</td>
				<!--使用index属性记录这行span所表示的学生的索引值-->
				<td><span index="{{index}}" class="edit-btn glyphicon glyphicon-edit"></span></td>
				<td><span sid="{{s.id}}" class="delete-btn glyphicon glyphicon-trash"></span></td>
			</tr>
			{{/each}}
		</table>
	</script>
	
	<!--翻页条模板-->
	<script type="text/html" id="t2">
		<ul class="pagination">
	    <li id="left-btn" class="{{currentPage!=0?'':'disabled'}}">
	      <span aria-hidden="true">&laquo;</span>
	    </li>
	    
	    <% for(var i = 0;i<pages;i++){ %>
	    <li index="{{i}}" class="{{currentPage==i?'active':''}} page-btn"><span>{{i+1}}</span></li>
	    <% } %>
	    
	    <li id="right-btn" class="{{currentPage==pages-1?'disabled':''}}">
	       <span aria-hidden="true">&raquo;</span>
	    </li>
	  </ul>
	</script>
	
	<script src="js/index.js"></script>
</html>
